<template>
	<view class="page">
		<view class="main">
			<view class="form-wrap">
				<u-form labelWidth="220rpx">
					<u-form-item label="企业名称：" prop="name" required>
						<u-input v-model="form.name" border="none" inputAlign="right" placeholder="请输入企业名称" />
					</u-form-item>
					<u-form-item label="主营品牌及产品：" prop="name" labelPosition="top" labelWidth="100%">
						<u-textarea v-model="form.name" placeholder="请输入主营品牌及产品" count maxlength="200"
							style="margin-top: 38rpx;" height="186rpx"></u-textarea>
					</u-form-item>
					<u-form-item label="负责销售区域:(可多选）" prop="name">
						<u-input v-model="form.name" placeholder="请选择" border="none" inputAlign="right" disabled
							@click="showSex = true; hideKeyboard()" disabledColor="#ffffff" />
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="导航地址：" prop="name">
						<u-input v-model="form.name" placeholder="请选择" border="none" inputAlign="right" disabled
							@click="showSex = true; hideKeyboard()" disabledColor="#ffffff" />
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="姓名：" prop="name" required>
						<u-input v-model="form.name" border="none" inputAlign="right" placeholder="请输入姓名" />
					</u-form-item>
					<u-form-item label="职务：" prop="name">
						<u-input v-model="form.name" border="none" inputAlign="right" placeholder="请输入职务" />
					</u-form-item>
					<u-form-item label="电话：" prop="name" required>
						<u-input v-model="form.name" border="none" inputAlign="right" placeholder="请输入电话" />
					</u-form-item>
					<u-form-item label="客户照片：" prop="name">
						<view class="tx-wrap">
							<image src="../../../static/logo.png" class="tx" border="none"></image>
						</view>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="btm-wrap-tc">

		</view>
		<view class="btm-wrap">
			<view class="btn return-btn">
				名片预览
			</view>
			<view class="btn confim-btn">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {}
			};
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F5F5F5;

		.main {
			position: relative;
			padding: 0 30rpx;

			.page-title {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				font-weight: bold;
			}

			.form-wrap {

				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 0 30rpx;

				.tx-wrap {
					display: flex;
					width: 100%;
					justify-content: flex-end;
				}

				.tx {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;

				}
			}
		}
	}

	.btm-wrap-tc {
		width: 100%;
		height: 170rpx;

	}

	.btm-wrap {
		width: 100%;
		position: fixed;
		bottom: 50rpx;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		z-index: 99;

		.btn {
			width: 244rpx;
			height: 70rpx;
			border-radius: 42rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;

			&.return-btn {
				border: 1px solid #EC2424;
				color: #EC2424;
				background-color: #FFFFFF;
			}

			&.confim-btn {
				color: #FFFFFF;
				background: #EC2424;
			}
		}
	}
</style>